<template>
    <div>
        <el-dialog :title="currentCrossing.crossing_name+' 车道配置'" :visible.sync="outerVisible" width="600px"
                   append-to-body>
            <div style="padding-left: 0; padding-bottom: 10px;">
                <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd()">添加</el-button>
            </div>

            <el-table ref="orderTable" v-loading="isLoading" class="actionTable" stripe :data="tableData"
                      style="width: 100%;" border>
                <el-table-column label="车道编号" width="80" prop="lane_no"/>
                <el-table-column label="车道名称" prop="lane_name"/>
                <el-table-column label="车道类型" width="100">
                    <template slot-scope="scope">
                        <remote-dict-label dict="lane_type" :value="scope.row.lane_type"/>
                    </template>
                </el-table-column>
                <el-table-column label="方向" width="120" prop="detection_direction"/>
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">修改
                        </el-button>
                        <!--                        <el-button size="small" type="text" icon="el-icon-edit" @click="handleDelete(scope.row)">删除</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <el-dialog :visible.sync="showzsbh" width="600px" append-to-body>
            <div style="padding-left: 0; padding-bottom: 10px;">
                <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAddzsbh()">添加</el-button>
            </div>
            <el-table ref="orderTable" v-loading="isLoading1" class="actionTable" stripe :data="tableData1"
                      style="width: 100%;" border>
                <el-table-column label="测试" width="120" prop="weighting_device_id"/>
                <el-table-column label="设备编号" width="120" prop="device_no"/>
                <el-table-column label="证书编号" width="120" prop="cert_no"/>
                <el-table-column label="开始时间" width="120" prop="start_time"/>
                <el-table-column label="结束时间" width="120" prop="end_time"/>
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" icon="el-icon-edit" @click="handleEditzshb(scope.row)">修改
                        </el-button>
                        <!--                        <el-button size="small" type="text" icon="el-icon-edit" @click="handleDelete(scope.row)">删除</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="showzsbh = false">取 消</el-button>
                <el-button size="small" :loading="isLoading" type="primary" @click="showzsbh=false">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="addzsbh" width="400px" append-to-body>
            <el-form ref="form" label-width="120px" :model="formzsbh" :rules="rules" size="small">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="检定证书编号" prop="cert_no">
                            <el-input v-model="formzsbh.cert_no" placeholder="请输入检定证书编号"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="检测设备编号" prop="device_no">
                            <el-input v-model="formzsbh.device_no" placeholder="请输入检测设备编号"/>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row type="flex" justify="center">
                    开始日期：
                    <el-date-picker
                        v-model="formzsbh.start_time"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetime"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-row>
                <br>
                <el-row type="flex" justify="center">
                    结束日期：
                    <el-date-picker
                        v-model="formzsbh.end_time"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetime"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="addzsbh = false">取 消</el-button>
                <el-button size="small" :loading="isLoading" type="primary" @click="handleSubmitzsbh">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog :title="(form.lane_id?'修改':'添加')+'车道'" :visible.sync="innerVisible" width="400px" append-to-body>
            <el-form ref="form" label-width="120px" :model="form" :rules="rules" size="small">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="车道编号" prop="lane_no">
                            <el-input v-model="form.lane_no" placeholder="请输入车道编号"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="车道名称" prop="lane_name">
                            <el-input v-model="form.lane_name" placeholder="请输入车道名称"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="车道类型" prop="lane_type">
                            <remote-dict-select v-model="form.lane_type" :name.sync="form.lane_type_name"
                                                dict="lane_type" :clearable="false"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="方向" prop="direction_index">
                            <remote-dict-select v-model="form.direction_index" :name.sync="form.detection_direction"
                                                dict="lane_direction" :clearable="false"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item v-if="!form.lane_id" label="检定证书编号" prop="cert_no">
                            <el-input v-model="form.cert_no" placeholder="车道方向索引"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item v-if="!form.lane_id" label="检测设备编号" prop="device_no">
                            <el-input v-model="form.device_no" placeholder="请输入检测设备编号"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="!form.lane_id" type="flex" justify="center">
                    开始日期：
                    <el-date-picker
                        v-model="form.start_time"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetime"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-row>
                <br>
                <el-row v-if="!form.lane_id" type="flex" justify="center">
                    结束日期：
                    <el-date-picker
                        v-model="form.end_time"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetime"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="form.lane_id" size="small" :loading="isLoading" type="primary" @click="zsbh">证书编号
                </el-button>
                <el-button size="small" @click="innerVisible = false">取 消</el-button>
                <el-button size="small" :loading="isLoading" type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import moment from 'moment';
    import {
        BayonetLane,
        UpdateBayonetLane,
        InsertBayonetLane,
        InquiryCertNo,
        InsertCertNo,
        UpdateCertNo
    } from '@/api/resourceManageApi';
    import RemoteDictSelect from '@/modules/components/DictSelect/RemoteDictSelect';
    import RemoteDictLabel from '@/modules/components/DictSelect/RemoteDictLabel';

    export default {
        name: 'LaneDialog',
        components: {
            RemoteDictSelect, RemoteDictLabel
        },
        props: {},
        data() {
            return {
                form: {
                    cert_no: null,
                    device_no: '',
                    start_time: '',
                    end_time: '',
                    weighting_device_id: '',
                    lane_id: '',
                },
                formzsbh: {
                    cert_no: null,
                    device_no: '',
                    start_time: '',
                    end_time: '',
                    weighting_device_id: '',
                    lane_id: '',
                },
                outerVisible: false,
                innerVisible: false,
                isLoading: false,
                isLoading1: false,
                CertVisible: false,
                showzsbh: false,
                addzsbh: false,
                tableData: [],
                tableData1: [],
                currentCrossing: {},
                rangeValue: [moment().format('YYYY-MM-DD HH:mm:ss'), moment().add(2, 'years').format('YYYY-MM-DD HH:mm:ss')],
                rules: {
                    lane_no: [
                        {required: true, message: '车道编号不能为空', trigger: 'blur'}
                    ],
                    lane_name: [
                        {required: true, message: '车道名称不能为空', trigger: 'blur'}
                    ],
                    lane_type: [
                        {required: true, message: '车道类型必须选择', trigger: 'change'}
                    ],
                    direction_index: [
                        {required: true, message: '方向必须选择', trigger: 'change'}
                    ],
                    cert_no: [
                        {required: false, message: '方向必须选择', trigger: 'change'}
                    ],
                    device_no: [
                        {required: false, message: '方向必须选择', trigger: 'change'}
                    ]

                }
            };
        },
        computed: {},
        watch: {},
        mounted() {

        },
        methods: {
            moment,
            show(crossing) {
                this.currentCrossing = crossing;
                this.outerVisible = true;
                this.loadRemoteData();
            },
            zsbh() {
                this.showzsbh = true;
                // this.isLoading1 = true;
                InquiryCertNo({
                    // lane_id: this.tableData[0].lane_id
                    lane_id: this.form.lane_id
                }).then(res => {
                    // this.showzsbh = false;
                    console.log(res);
                    this.tableData1 = res.res.InquiryCertNo;
                    // this.tableData.forEach(x => {
                    //     x.lane_type = (x.lane_type || x.lane_type == 0) ? parseInt(x.lane_type).toString() : '';
                    // });
                }).catch(err => {
                    this.showzsbh = false;
                    console.log(err);
                });
            },
            loadRemoteData() {
                this.isLoading = true;
                BayonetLane({
                    crossing_id: this.currentCrossing.crossing_id
                }).then(res => {
                    this.isLoading = false;
                    console.log(res);
                    this.tableData = res.res.BayonetLane;
                    this.tableData.forEach(x => {
                        x.lane_type = (x.lane_type || x.lane_type == 0) ? parseInt(x.lane_type).toString() : '';
                    });
                }).catch(err => {
                    this.isLoading = false;
                    console.log(err);
                });
            },
            handleAdd() {
                this.form = {
                    crossing_id: this.currentCrossing.crossing_id
                };
                this.innerVisible = true;
                this.CertVisible = false;
                this.$nextTick(() => {
                    this.$refs['form'] && this.$refs['form'].clearValidate();
                });
            },
            handleAddzsbh() {
                // this.form = {
                //     crossing_id: this.currentCrossing.crossing_id
                // };
                this.addzsbh = true;
                // this.CertVisible = false;
                this.formzsbh = {};
                this.$nextTick(() => {
                    this.$refs['formzsbh'] && this.$refs['formzsbh'].clearValidate();
                });
            },
            handleEdit(item) {
                this.form = {...item};
                this.form.lane_type = (this.form.lane_type || this.form.lane_type == 0) ? parseInt(this.form.lane_type).toString() : '';
                this.form.direction_index = this.form.direction_index ? parseInt(this.form.direction_index).toString() : '';
                this.form.weighting_device_id = this.tableData[0].weighting_device_id;
                this.innerVisible = true;
                this.CertVisible = true;
            },
            handleEditzshb(item) {
                this.addzsbh = true;
                this.formzsbh = {...item};
                this.formzsbh.weighting_device_id = this.tableData1[0].weighting_device_id;
                this.formzsbh.lane_id = this.tableData1[0].lane_id;
                // this.form.lane_type = (this.form.lane_type || this.form.lane_type == 0) ? parseInt(this.form.lane_type).toString() : '';
                // this.form.direction_index = this.form.direction_index ? parseInt(this.form.direction_index).toString() : '';
                // this.innerVisible = true;
                // this.CertVisible = true;
            },
            // handleDelete(item) {
            //     this.form = {...item};
            //     this.$confirm('是否确认删除车道"' + item.lane_no + '"的数据项?', '警告', {
            //         confirmButtonText: '确定',
            //         cancelButtonText: '取消',
            //         type: 'warning'
            //     }).then(() => {
            //         deleteBayonetLane({
            //             land_id = this.form.lane_id;
            //         }).then(res => {
            //             this.$message.success('删除成功');
            //             this.loadRemoteData();
            //         }).catch(err => {
            //             console.log(err);
            //         });
            //
            //     }).catch(err => {
            //         console.log(err);
            //     });
            // },
            handleSubmit() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        if (this.form.lane_id) {

                            this.isLoading = true;
                            // eslint-disable-next-line no-unused-vars
                            let postData = {...this.form};

                            UpdateBayonetLane(postData).then(res => {
                                this.isLoading = false;
                                this.$message.success('操作成功');
                                this.innerVisible = false;
                                this.loadRemoteData();
                            }).catch(err => {
                                this.isLoading = false;
                                console.log(err);
                            });

                        } else {

                            this.isLoading = true;
                            // eslint-disable-next-line no-unused-vars
                            InsertBayonetLane(this.form).then(res => {
                                this.isLoading = false;
                                this.$message.success('添加成功');
                                this.innerVisible = false;
                                this.loadRemoteData();
                            }).catch(err => {
                                this.isLoading = false;
                                console.log(err);
                            });

                        }

                    }
                });
            },

            handleSubmitzsbh() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        if (this.formzsbh.cert_no == this.tableData1[0].cert_no) {
                            this.addzsbh = true;
                            // eslint-disable-next-line no-unused-vars
                            let postDatazsbh = {...this.formzsbh};
                            // postDatazsbh.
                            UpdateCertNo(postDatazsbh).then(res => {
                                // this.isLoading = false;
                                this.$message.success('操作成功');
                                this.addzsbh = false;
                                // this.loadRemoteData();
                            }).catch(err => {
                                this.addzsbh = false;
                                console.log(err);
                            });
                        } else {
                            this.addzsbh = true;
                            // eslint-disable-next-line no-unused-vars
                            this.form.lane_id = this.tableData[0].lane_id;
                            this.formzsbh.lane_id = this.tableData[0].lane_id;
                            let postDatazsbh = {...this.formzsbh};
                            InsertCertNo(postDatazsbh).then(res => {
                                // this.isLoading = false;
                                this.$message.success('添加成功');
                                this.addzsbh = false;
                                // this.loadRemoteData();
                            }).catch(err => {
                                this.addzsbh = false;
                                console.log(err);
                            });

                        }

                    }
                });
            }

        }
    };
</script>

<style scoped>

    /deep/
    .el-dialog__body {
        padding: 10px 20px;
    }
    /deep/
    .el-dialog__header {
        padding: 20px 20px 10px;
        border-bottom: 1px solid #dcdfe6;
    }
    /deep/
    .el-table td {
        padding: 5px 0 !important;
    }
    /deep/
    .el-button--text {
        padding: 5px 0;
    }
</style>
